---
{
	"title": "Filtre",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Filtre du contenu et n'affiche que le contenu ayant un certain mot-clé.",
	"tag": "filter",
	"parentdir": "filter",
	"altLangPrefix": "filter",
	"dateModified": "2025-08-07",
	"gcds": true
}
---
<div class="wb-prettify all-pre hide"></div>
<ul>
	<li><a href="#flt-section">Filtrer des items par section</a></li>
	<li><a href="#flt-list">Filtrer une liste</a></li>
	<li><a href="#flt-table">Filtrer un tableau</a></li>
	<li><a href="#flt-search">Application de filtres de recherche supplémentaires</a></li>
	<li><a href="#flt-uicontainer">Déplacer l'interface vers un élément spécifique</a></li>
	<li><a href="#flt-customui">Interface personnalisée</a></li>
	<li><a href="#flt-customui">Interface personnalisée et Data JSON</a></li>
	<li><a href="#flt-gcdsCard">Carte SDGC</a></li>
</ul>

<h2 id="flt-section">Filtrer des items par section</h2>
<div class="wb-filter">
	<section id="enquete-a">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>A</h2>

		<ul class="list-unstyled">
			<li>Achats de grains fourragers</li>
			<li>Activité aéroportuaire, Enquête sur l&#39;</li>
			<li>Activités pétrolières et gazières, Relevé trimestriel des dépenses en immobilisations</li>
			<li>Approvisionnement et l&#39;écoulement du charbon, Enquête mensuelle sur l&#39;</li>
			<li>Approvisionnement et l&#39;écoulement de l&#39;électricité, Enquête mensuelle sur l&#39;</li>
		</ul>
	</section>

	<section id="enquete-b">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>B</h2>

		<ul class="list-unstyled">
			<li>Balance des paiements internationaux du Canada</li>
			<li>Base tarifaire, Enquête sur la</li>
			<li>Biens et services environnementaux, Enquête sur les</li>
			<li>Bilan des investissements internationaux du Canada</li>
			<li>Brevets, licences et redevances fédérales, Enquête sur les</li>
			<li>Bureaux d&#39;agents, de courtiers en immeuble, et d&#39;évaluateurs de biens immobiliers et des activités liées à l&#39;immobilier, Enquête annuelle sur les industries de services</li>
		</ul>
	</section>

	<section id="enquete-c">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>C</h2>

		<ul class="list-unstyled">
			<li>Canadiens au travail et à la maison, Enquête sociale générale</li>
			<li>Ciment, Enquête de</li>
			<li>Commerce de détail, Enquête annuelle sur le</li>
			<li>Commerce de détail, Enquête mensuelle sur le</li>
			<li>Commerce de détail hors magasin, Enquête annuelle sur le</li>
			<li>Commerce de détail &ndash; Organismes des grands magasins, Enquête mensuelle sur le</li>
			<li>Commerce de gros, Enquête annuelle sur le</li>
			<li>Commerce de gros, Enquête mensuelle sur le</li>
			<li>Consommation de combustibles de centrales thermiques d&#39;énergie électrique, Enquête annuelle sur la</li>
			<li>Contrôle et vente des boissons alcoolisées au Canada</li>
			<li>Cours de base sur les enquêtes</li>
			<li>Couverture de l&#39;assurance-emploi, Enquête sur la</li>
		</ul>
	</section>

	<section id="enquete-d">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>D</h2>

		<ul class="list-unstyled">
			<li>Demande de services dans les langues officielles, Enquête sur la</li>
			<li>Dépenses de recherche et développement énergétique par secteur de technologie</li>
			<li>Dépenses des ménages, Enquête sur les</li>
			<li>Dépenses du gouvernement fédéral au titre de l&#39;éducation, Enquête sur les (EDGFE)</li>
			<li>Dépenses en immobilisations et réparations, Enquête annuelle sur les : réelles, provisoires, perspectives (EDIR)</li>
			<li>Dépenses et main-d&#39;œuvre scientifiques fédérales, activités dans les sciences sociales et les sciences naturelles</li>
			<li>Design spécialisé, Enquête annuelle sur les industries de services</li>
			<li>Développement de logiciels et services informatiques, Enquête annuelle sur les industries de services</li>
			<li>Distribution de films cinématographiques et de vidéos, Enquête sur les industries de services</li>
			<li>Distribution du gaz naturel, Enquête mensuelle sur la</li>
			<li>Divertissement et loisirs, Enquête annuelle sur les industries de services</li>
		</ul>
	</section>

	<section id="enquete-e">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>E</h2>

		<ul class="list-unstyled">
			<li>Eau dans l&rsquo;agriculture, Enquête sur l&#39;</li>
			<li>Eau dans les industries, Enquête sur l&#39;</li>
			<li>Éditeurs de bases de données, de répertoires et de spécialités, Enquête annuelle sur les industries de services</li>
			<li>Éditeurs de périodiques, Enquête sur les industries de services</li>
			<li>Emploi, la rémunération et les heures de travail, Enquête sur l&#39; (EERH)</li>
			<li>Enquête canadienne sur les mesures de la santé</li>
			<li>Enquête canadienne sur la santé des enfants et des jeunes</li>
			<li>Enregistrement sonore et édition de musique, Enquête sur les industries de services</li>
			<li>Essence et autres combustibles de pétrole de vendus</li>
			<li>Estimations trimestrielles relatives aux caisses de retraite en fiducie</li>
			<li>États financiers, Relevé trimestriel des</li>
		</ul>
	</section>

	<section id="enquete-f">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>F</h2>

		<ul class="list-unstyled">
			<li>Fournisseurs de services de financements aux entreprises, Enquête semestrielle auprès des</li>
		</ul>
	</section>

	<section id="enquete-g">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>G</h2>

		<ul class="list-unstyled">
			<li>Grands détaillants, Enquête mensuelle sur les</li>
		</ul>
	</section>

	<section id="enquete-h">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>H</h2>

		<ul class="list-unstyled">
			<li>Homicide, Enquête sur l&#39;</li>
		</ul>
	</section>

	<section id="enquete-i">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>I</h2>

		<ul class="list-unstyled">
			<li>Indicateurs de service, Enquête trimestrielle sur les</li>
			<li>Indice des prix à la consommation (Prix des médicaments d&#39;ordonnance, d&#39;origine et génériques)</li>
			<li>Indices des prix de la construction d&#39;immeubles d&#39;appartements</li>
			<li>Indice des prix de la construction de bâtiments non résidentiels (IPCBNR)</li>
			<li>Indice des prix des logements neufs (IPLN)</li>
			<li>Indice des prix des services d&#39;architecture, de génie et des services connexes (IPSAGC)</li>
			<li>Indice des prix des services de comptabilité</li>
			<li>Indice des prix des services de camionnage pour compte d&#39;autrui</li>
			<li>Indice des prix des services de conseils</li>
			<li>Indice des prix des services de location et de location à bail de machines et de matériel d&#39;usage commercial et industriel</li>
			<li>Indice des prix des services de messageries et de services des messagers</li>
			<li>Indice des prix des services de transport ferroviaire de marchandises (IPSTFM)</li>
			<li>Indice des prix des services du commerce de détail (IPSCD)</li>
			<li>Indice des prix des services du commerce de gros</li>
			<li>Indice des prix des services professionnels en informatique</li>
			<li>Indices de mission canadienne à l&#39;étranger</li>
			<li>Industries manufacturières, Enquête mensuelle sur les</li>
			<li>Industries manufacturières et de l&#39;exploitation forestière, Enquête annuelle sur les (EAMEF)</li>
			<li>Information financière des collèges communautaires et des écoles de formation professionnelle</li>
			<li>Information financière des universités et collèges (IFUC)</li>
			<li>Inventaire du beurre et du fromage</li>
		</ul>
	</section>

	<section id="enquete-l">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>L</h2>

		<ul class="list-unstyled">
			<li>Location de biens de consommation, Enquête annuelle sur les industries de services</li>
			<li>Location et location à bail de machines et matériel d&#39;usage commercial et industriel, Enquête annuelle sur les industries de services</li>
			<li>Location et location à bail de matériel automobile, Enquête annuelle sur les industries de services</li>
			<li>Location, location à bail et gestion de biens immobiliers, Enquête sur les industries de services</li>
		</ul>
	</section>

	<section id="enquete-m">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>M</h2>

		<ul class="list-unstyled">
			<li>Mise à jour de la base de sondage agricole, Enquête sur la (EMJA)</li>
		</ul>
	</section>

	<section id="enquete-o">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>O</h2>

		<ul class="list-unstyled">
			<li>Opérations des transporteurs aériens au Canada, Enquête trimestrielle sur les</li>
			<li>Opérations internationales du Canada en valeurs mobilières</li>
			<li>Origine et destination des passagers aériens - Voyages intérieurs</li>
			<li>Origine et destination des passagers aériens, Canada - États-Unis</li>
			<li>Origine et la destination des marchandises transportées par camion</li>
		</ul>
	</section>

	<section id="enquete-p">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>P</h2>

		<ul class="list-unstyled">
			<li>Papier-toiture asphalté</li>
			<li>Parités de pouvoir d&#39;achat</li>
			<li>Permis de bâtir, Enquête des</li>
			<li>Population active, Enquête sur la (EPA)</li>
			<li>Postes vacants et les salaires, Enquête sur les</li>
			<li>Postproduction cinématographique, télévisuelle et vidéo, Enquête sur les industries de services</li>
			<li>Principales statistiques financières et d&#39;exploitation des grands transporteurs aériens, Enquête mensuelle sur les</li>
			<li>Production cinématographique, télévisuelle et vidéo, Enquête sur les industries de services</li>
			<li>Prix et les coûts à l&rsquo;étranger, Enquête sur les</li>
			<li>Production et écoulement des produits du tabac</li>
			<li>Production et stocks des fabriques laitières</li>
			<li>Produits pétroliers raffinés (rapport mensuel)</li>
			<li>Programme de déclaration uniforme de la criminalité</li>
			<li>Prospection, arpentage et cartographie, Enquête annuelle sur les industries de services</li>
			<li>Publicité et services connexes, Enquête annuelle sur les industries de services</li>
		</ul>
	</section>

	<section id="enquete-r">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>R</h2>

		<ul class="list-unstyled">
			<li>Rapport des prix des appartements en copropriété neufs (RPACN)</li>
			<li>Rapport sur les prix des exportations et des importations</li>
			<li>Recensement de l&#39;agriculture</li>
			<li>Recherche et développement dans l&#39;industrie canadienne, Enquête annuelle sur la</li>
			<li>Recherche et développement des organismes privés sans but lucratif au Canada</li>
			<li>Registre des entreprises</li>
			<li>Régimes de pension au Canada</li>
			<li>Rémunération auprès des entreprises, Enquête sur la</li>
		</ul>
	</section>

	<section id="enquete-s">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>S</h2>

		<ul class="list-unstyled">
			<li>Santé dans les collectivités canadiennes, Enquête sur la &ndash; composante annuelle</li>
			<li>Scieries</li>
			<li>Sécurité financière, Enquête sur la</li>
			<li>Série de rapports sur les grandes cultures</li>
			<li>Services d&#39;architecture, Enquête annuelle sur les industries de services</li>
			<li>Services d&#39;emploi, Enquête annuelle sur les industries de services</li>
			<li>Services d&#39;hébergement, Enquête annuelle sur les industries de services</li>
			<li>Services de comptabilité, Enquête annuelle sur les industries de services</li>
			<li>Services de conseils, Enquête annuelle sur les industries de services</li>
			<li>Services de génie, Enquête annuelle sur les industries de services</li>
			<li>Services de préparation de voyages, Enquête annuelle sur les industries de services</li>
			<li>Services de réparation et d&#39;entretien, Enquête annuelle sur les industries de services</li>
			<li>Services de restauration et débits de boissons, Enquête annuelle sur les industries de services</li>
			<li>Services de restauration et débits de boissons, Enquête mensuelle sur les</li>
			<li>Sièges sociaux, Enquête annuelle auprès des</li>
			<li>Société ferroviaire &ndash; Rapport annuel</li>
			<li>Sports-spectacles, promoteurs d&#39;événements, artistes et industries connexes, Enquête annuelle sur les industries de services</li>
			<li>Statistiques de finances publiques canadiennes (SFPC)</li>
			<li>Stocks commerciaux de maïs et de soya, Enquête sur les</li>
			<li>Stocks commerciaux des principales cultures spéciales, Enquête sur les</li>
			<li>Système d&#39;information sur les étudiants postsecondaires</li>
		</ul>
	</section>

	<section id="enquete-t">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>T</h2>

		<ul class="list-unstyled">
			<li>Télécommunications, Enquête trimestrielle des</li>
			<li>Transactions internationales de services du Canada</li>
			<li>Transport de passagers par autobus et le transport urbain, Enquête annuelle sur le</li>
			<li>Transport de passagers par autobus et le transport urbain, Enquête mensuelle sur le</li>
			<li>Transport du gaz naturel, Enquête mensuelle sur le</li>
			<li>Transport par oléoduc de pétrole brut et autres produits pétroliers liquides, Enquête mensuelle sur le</li>
		</ul>
	</section>

	<section id="enquete-v">
		<h2><span class="wb-inv">Enquêtes débutant par la lettre </span>V</h2>

		<ul class="list-unstyled">
			<li>Viandes froides et congelées, Enquête trimestrielle sur les stocks</li>
			<li>Voyages des résidents du Canada, Enquête sur les</li>
			<li>Voyages internationaux, Enquête sur les</li>
		</ul>
	</section>
</div>


<h3>Code source</h3>
<pre><code>&lt;div class=&quot;wb-filter&quot;&gt;
	&lt;section id=&quot;enquete-a&quot;&gt;
		&lt;h2&gt;&lt;span class=&quot;wb-inv&quot;&gt;Enquêtes débutant par la lettre &lt;/span&gt;A&lt;/h2&gt;

		&lt;ul class=&quot;list-unstyled&quot;&gt;
			&lt;li&gt;Achats de grains fourragers&lt;/li&gt;
			&lt;li&gt;Activité aéroportuaire, Enquête sur l&amp;#39;&lt;/li&gt;
			&lt;li&gt;Activités pétrolières et gazières, Relevé trimestriel des dépenses en immobilisations&lt;/li&gt;
			&lt;li&gt;Approvisionnement et l&amp;#39;écoulement du charbon, Enquête mensuelle sur l&amp;#39;&lt;/li&gt;
			&lt;li&gt;Approvisionnement et l&amp;#39;écoulement de l&amp;#39;électricité, Enquête mensuelle sur l&amp;#39;&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/section&gt;

	&lt;section id=&quot;enquete-b&quot;&gt;
		&lt;h2&gt;&lt;span class=&quot;wb-inv&quot;&gt;Enquêtes débutant par la lettre &lt;/span&gt;B&lt;/h2&gt;

		&lt;ul class=&quot;list-unstyled&quot;&gt;
			&lt;li&gt;Balance des paiements internationaux du Canada&lt;/li&gt;
			&lt;li&gt;Base tarifaire, Enquête sur la&lt;/li&gt;
			&lt;li&gt;Biens et services environnementaux, Enquête sur les&lt;/li&gt;
			&lt;li&gt;Bilan des investissements internationaux du Canada&lt;/li&gt;
			&lt;li&gt;Brevets, licences et redevances fédérales, Enquête sur les&lt;/li&gt;
			&lt;li&gt;Bureaux d&amp;#39;agents, de courtiers en immeuble, et d&amp;#39;évaluateurs de biens immobiliers et des activités liées à l&amp;#39;immobilier, Enquête annuelle sur les industries de services&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/section&gt;
	...
&lt;/div&gt;</code></pre>

<h2 id="flt-list">Filtrer une liste</h2>
<ul class="wb-filter">
	<li>Alberta</li>
	<li>Colombie-Britannique</li>
	<li>Île-du-Prince-Édouard</li>
	<li>Manitoba</li>
	<li>Nouveau-Brunswick</li>
	<li>Nouvelle-Écosse</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Québec</li>
	<li>Saskatchewan</li>
	<li>Terre-Neuve-et-Labrador</li>
	<li>Territoires du Nord-Ouest</li>
	<li>Yukon</li>
</ul>

<h3>Code source</h3>
<pre><code>&lt;ul class=&quot;wb-filter&quot;&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	&lt;li&gt;Colombie-Britannique&lt;/li&gt;
	&lt;li&gt;Île-du-Prince-Édouard&lt;/li&gt;
	&lt;li&gt;Manitoba&lt;/li&gt;
	&lt;li&gt;Nouveau-Brunswick&lt;/li&gt;
	&lt;li&gt;Nouvelle-Écosse&lt;/li&gt;
	&lt;li&gt;Nunavut&lt;/li&gt;
	&lt;li&gt;Ontario&lt;/li&gt;
	&lt;li&gt;Québec&lt;/li&gt;
	&lt;li&gt;Saskatchewan&lt;/li&gt;
	&lt;li&gt;Terre-Neuve-et-Labrador&lt;/li&gt;
	&lt;li&gt;Territoires du Nord-Ouest&lt;/li&gt;
	&lt;li&gt;Yukon&lt;/li&gt;
&lt;/ul&gt;</code></pre>

<h2 id="flt-table">Filtrer un tableau</h2>

<table class="wb-filter table">
	<caption>Population de grande municipalité par provinces</caption>
	<thead>
		<tr>
			<th>Municipalité</th>
			<th>Population (2016)</th>
			<th>Population (2011)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Alberta</th>
		</tr>
		<tr>
			<th>Calgary</th>
			<td>1,239,220</td>
			<td>1,096,833</td>
		</tr>
		<tr>
			<th>Edmonton</th>
			<td>932,546</td>
			<td>812,201</td>
		</tr>
		<tr>
			<th>Red Deer</th>
			<td>100,418</td>
			<td>90,564</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Colombie-Britannique</th>
		</tr>
		<tr>
			<th>Vancouver</th>
			<td>631,486</td>
			<td>603,502</td>
		</tr>
		<tr>
			<th>Surrey</th>
			<td>517,887</td>
			<td>468,251</td>
		</tr>
		<tr>
			<th>Burnaby</th>
			<td>232,755</td>
			<td>233,218</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Île-du-Prince-Édouard</th>
		</tr>
		<tr>
			<th>Charlottetown</th>
			<td>N/A</td>
			<td>34,562</td>
		</tr>
		<tr>
			<th>Summerside</th>
			<td>N/A</td>
			<td>14,751</td>
		</tr>
		<tr>
			<th>Stratford</th>
			<td>N/A</td>
			<td>8,574</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Manitoba</th>
		</tr>
		<tr>
			<th>Winnipeg</th>
			<td>705,224</td>
			<td>663,617</td>
		</tr>
		<tr>
			<th>Brandon</th>
			<td>48,859</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Springfield</th>
			<td>N/A</td>
			<td>14,069</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Nouveau-Brunswick</th>
		</tr>
		<tr>
			<th>Moncton</th>
			<td>71,889</td>
			<td>69,074</td>
		</tr>
		<tr>
			<th>Saint John</th>
			<td>67,575</td>
			<td>70,063</td>
		</tr>
		<tr>
			<th>Fredericton</th>
			<td>58,220</td>
			<td>56,224</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Nouvelle-Écosse</th>
		</tr>
		<tr>
			<th>Halifax</th>
			<td>403,131</td>
			<td>390,096</td>
		</tr>
		<tr>
			<th>Cape Breton</th>
			<td>94,285</td>
			<td>97,398</td>
		</tr>
		<tr>
			<th>Sydney</th>
			<td>N/A</td>
			<td>31,597</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Nunavut</th>
		</tr>
		<tr>
			<th>Iqaluit</th>
			<td>7,740</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Arviat</th>
			<td>2,657</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Rankin Inlet</th>
			<td>2,842</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Ontario</th>
		</tr>
		<tr>
			<th>Toronto</th>
			<td>2,731,579</td>
			<td>2,615,060</td>
		</tr>
		<tr>
			<th>Ottawa</th>
			<td>934,243</td>
			<td>883,391</td>
		</tr>
		<tr>
			<th>Mississauga</th>
			<td>721,599</td>
			<td>713,443</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Québec</th>
		</tr>
		<tr>
			<th>Montréal</th>
			<td>1,704,694</td>
			<td>1,649,519</td>
		</tr>
		<tr>
			<th>Québec</th>
			<td>531,902</td>
			<td>516,622</td>
		</tr>
		<tr>
			<th>Laval</th>
			<td>422,993</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Saskatchewan</th>
		</tr>
		<tr>
			<th>Saskatoon</th>
			<td>246,376</td>
			<td>222,189</td>
		</tr>
		<tr>
			<th>Regina</th>
			<td>215,106</td>
			<td>193,100</td>
		</tr>
		<tr>
			<th>Prince Albert</th>
			<td>35,926</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Terre-Neuve-et-Labrador</th>
		</tr>
		<tr>
			<th>St. John's</th>
			<td>108,860</td>
			<td>106,172</td>
		</tr>
		<tr>
			<th>Conception Bay South</th>
			<td>26,199</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Mount Pearl</th>
			<td>22,957</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Territoires du Nord-Ouest</th>
		</tr>
		<tr>
			<th>Yellowknife</th>
			<td>19,569</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Hay River</th>
			<td>N/A</td>
			<td>3,606</td>
		</tr>
		<tr>
			<th>Inuvik</th>
			<td>3,140</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Yukon</th>
		</tr>
		<tr>
			<th>Whitehorse</th>
			<td>25,085</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Dawson City</th>
			<td>1,375</td>
			<td>M/A</td>
		</tr>
		<tr>
			<th>Faro</th>
			<td>344</td>
			<td>N/A</td>
		</tr>
	</tbody>
</table>

<h3>Code source</h3>
<pre><code>&lt;table class=&quot;wb-filter table&quot;&gt;
	&lt;caption&gt;Population de grande municipalité par provinces&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Municipalité&lt;/th&gt;
			&lt;th&gt;Population (2016)&lt;/th&gt;
			&lt;th&gt;Population (2011)&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th scope=&quot;rowgroup&quot; class=&quot;h4&quot; colspan=&quot;3&quot;&gt;Alberta&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Calgary&lt;/th&gt;
			&lt;td&gt;1,239,220&lt;/td&gt;
			&lt;td&gt;1,096,833&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Edmonton&lt;/th&gt;
			&lt;td&gt;932,546&lt;/td&gt;
			&lt;td&gt;812,201&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Red Deer&lt;/th&gt;
			&lt;td&gt;100,418&lt;/td&gt;
			&lt;td&gt;90,564&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th scope=&quot;rowgroup&quot; class=&quot;h4&quot; colspan=&quot;3&quot;&gt;Colombie-Britannique&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Vancouver&lt;/th&gt;
			&lt;td&gt;631,486&lt;/td&gt;
			&lt;td&gt;603,502&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Surrey&lt;/th&gt;
			&lt;td&gt;517,887&lt;/td&gt;
			&lt;td&gt;468,251&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Burnaby&lt;/th&gt;
			&lt;td&gt;232,755&lt;/td&gt;
			&lt;td&gt;233,218&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	...
&lt;/table&gt;</code></pre>

<h2 id="flt-search">Application de filtres de recherche supplémentaires</h2>

<p>Le plugiciel de filtre propose trois types de méthodes de recherche&nbsp;: correspondance exacte du modèle (par défaut), opérateur AND et opérateur OR.</p>

<h3>Correspondance exacte du modèle (par défaut)</h3>

<p>Recherche les éléments qui contiennent exactement ce que l'utilisateur a spécifié.</p>

<p>En ne définissant pas le paramètre <code>filterType</code>, on indiquera au plugiciel de filtre d'appliquer le modèle de recherche par défaut qui correspond exactement au modèle des termes de recherche. Seuls les éléments contenant le modèle complet et exact saisi par l'utilisateur seront affichés.</p>

<ul class="wb-filter">
	<li>Alberta</li>
	<li>Colombie-Britannique</li>
	<li>Île-du-Prince-Édouard</li>
	<li>Manitoba</li>
	<li>Nouveau-Brunswick</li>
	<li>Nouvelle-Écosse</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Québec</li>
	<li>Saskatchewan</li>
	<li>Terre-Neuve-et-Labrador</li>
	<li>Territoires du Nord-Ouest</li>
	<li>Yukon</li>
</ul>

<h4>Code source</h4>

<pre><code>&lt;ul class=&quot;wb-filter&quot;&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	...
&lt;/ul&gt;</code></pre>

<h3>Opérateur AND</h3>

<p>Recherche les éléments qui contiennent tous les mots spécifiés.</p>

<p>En définissant le paramètre <code>filterType</code> à <code>and</code>, on indiquera au plugiciel de filtre d'appliquer un opérateur AND entre les termes de recherche. Seuls les éléments contenant tous les termes de recherche seront affichés.</p>

<ul class="wb-filter" data-wb-filter='{ "filterType": "and" }'>
	<li>Alberta</li>
	<li>Colombie-Britannique</li>
	<li>Île-du-Prince-Édouard</li>
	<li>Manitoba</li>
	<li>Nouveau-Brunswick</li>
	<li>Nouvelle-Écosse</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Québec</li>
	<li>Saskatchewan</li>
	<li>Terre-Neuve-et-Labrador</li>
	<li>Territoires du Nord-Ouest</li>
	<li>Yukon</li>
</ul>

<h4>Code source</h4>

<pre><code>&lt;ul class=&quot;wb-filter&quot; data-wb-filter='{ "filterType": "and" }'&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	...
&lt;/ul&gt;</code></pre>

<h3>Opérateur OR</h3>

<p>Recherche les éléments qui contiennent au moins un des mots spécifiés.</p>

<p>En définissant le paramètre <code>filterType</code> à <code>or</code>, on indiquera au plugiciel de filtre d'appliquer un opérateur OR entre les termes de recherche. Tous les éléments contenant l'un des termes de recherche fournis seront affichés.</p>

<ul class="wb-filter" data-wb-filter='{ "filterType": "or" }'>
	<li>Alberta</li>
	<li>Colombie-Britannique</li>
	<li>Île-du-Prince-Édouard</li>
	<li>Manitoba</li>
	<li>Nouveau-Brunswick</li>
	<li>Nouvelle-Écosse</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Québec</li>
	<li>Saskatchewan</li>
	<li>Terre-Neuve-et-Labrador</li>
	<li>Territoires du Nord-Ouest</li>
	<li>Yukon</li>
</ul>

<h4>Code source</h4>

<pre><code>&lt;ul class=&quot;wb-filter&quot; data-wb-filter='{ "filterType": "or" }'&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	...
&lt;/ul&gt;</code></pre>

<h3 id="flt-uicontainer">Déplacer l'interface vers un élément spécifique</h3>

<p>Définissez le paramètre <code>source</code> à un sélecteur jQuery dans lequel vous souhaitez contenir l'interface utilisateur du filtre. L'interface utilisateur sera ajoutée en haut (préfixe) de l'élément défini.</p>

<div class="row">
	<div class="col-md-4">
		<div id="filterUIContainer"></div>
	</div>
	<div class="col-md-8">
		<ul class="wb-filter" data-wb-filter='{ "source": "#filterUIContainer" }'>
			<li>Alberta</li>
			<li>Colombie-Britannique</li>
			<li>Île-du-Prince-Édouard</li>
			<li>Manitoba</li>
			<li>Nouveau-Brunswick</li>
			<li>Nouvelle-Écosse</li>
			<li>Nunavut</li>
			<li>Ontario</li>
			<li>Québec</li>
			<li>Saskatchewan</li>
			<li>Terre-Neuve-et-Labrador</li>
			<li>Territoires du Nord-Ouest</li>
			<li>Yukon</li>
		</ul>
	</div>
</div>

<h4>Code source</h4>

<pre><code>&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;col-md-4&quot;&gt;
		&lt;div id=&quot;filterUIContainer&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;col-md-8&quot;&gt;
		&lt;ul class=&quot;wb-filter&quot; data-wb-filter=&apos;{ &quot;source&quot;: &quot;#filterUIContainer&quot; }&apos;&gt;
			&lt;li&gt;Alberta&lt;/li&gt;
			...
		&lt;/ul&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>

<h3 id="flt-customui">Interface personnalisée</h3>
<p>Personnalisez l'interface utilisateur générée par le plugiciel en ajoutant un élément et en définissant l'option <code>uiTemplate</code> à son sélecteur CSS.</p>
<div class="wb-filter" data-wb-filter='{
	"uiTemplate": "#filterTemplate",
	"section": "ul"
}'>
	<div id="filterTemplate">
		<div class="form-group">
			<label for="customSearchUI">Rechercher</label>
			<input type="search" class="form-control" id="customSearchUI">
		</div>
		<p class="wb-fltr-info"><span data-nbitem></span> / <span data-total></span> événements</p>
	</div>
	<ul data-wb-json='{
		"url": "../tagfilter/data_fr.json#/events",
		"mapping": [
			{ "selector": "li", "value": "/title" }
		]
	}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

<h4>Source code</h4>
<pre><code>&lt;div class="wb-filter" data-wb-filter='{
	"uiTemplate": "#filterTemplate",
	"section": "ul"
}'>
	&lt;div id="filterTemplate">
		&lt;div class="form-group">
			&lt;label for="customSearchUI">Rechercher&lt;/label>
			&lt;input type="search" class="form-control" id="customSearchUI">
		&lt;/div>
		&lt;p class="wb-fltr-info">&lt;span data-nbitem>&lt;/span> / &lt;span data-total>&lt;/span> événements&lt;/p>
	&lt;/div>
	&lt;ul data-wb-json='{
		"url": "../tagfilter/data_fr.json#/events",
		"mapping": [
			{ "selector": "li", "value": "/title" }
		]
	}'>
		&lt;template>
			&lt;li>&lt;/li>
		&lt;/template>
	&lt;/ul>
&lt;/div></code></pre>

<h3 id="flt-gcdsCard">Carte SDGC</h3>
<gcds-grid columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" class="wb-filter" data-wb-filter='{ "selector": "gcds-card" }'>
	<gcds-card
	card-title="Alberta"
	href="#"
	description="Réputée pour les montagnes Rocheuses, les vastes prairies et les sables bitumineux."
	></gcds-card>
	<gcds-card
	card-title="Colombie-Britannique"
	href="#"
	description="Une province côtière avec des forêts pluviales, des montagnes et des villes dynamiques comme Vancouver."
	></gcds-card>
	<gcds-card
	card-title="Manitoba"
	href="#"
	description="Connue pour ses prairies, ses ours polaires et Winnipeg, un centre culturel majeur."
	></gcds-card>
	<gcds-card
	card-title="Nouveau-Brunswick"
	href="#"
	description="Une province maritime célèbre pour la baie de Fundy et son patrimoine bilingue."
	></gcds-card>
	<gcds-card
	card-title="Terre-Neuve-et-Labrador"
	href="#"
	description="La province la plus à l’est du Canada, riche en histoire, falaises et culture côtière."
	></gcds-card>
	<gcds-card
	card-title="Territoires du Nord-Ouest"
	href="#"
	description="Célèbres pour les aurores boréales, les cultures autochtones et le fleuve Mackenzie."
	></gcds-card>
	<gcds-card
	card-title="Nouvelle-Écosse"
	href="#"
	description="Une province côtière pittoresque connue pour ses fruits de mer, ses phares et son patrimoine maritime."
	></gcds-card>
	<gcds-card
	card-title="Nunavut"
	href="#"
	description="Le plus grand et plus récent territoire du Canada, peuplé de communautés inuites et de paysages arctiques."
	></gcds-card>
	<gcds-card
	card-title="Ontario"
	href="#"
	description="La province la plus peuplée du Canada, abritant Toronto, Ottawa et les chutes du Niagara."
	></gcds-card>
	<gcds-card
	card-title="Île-du-Prince-Édouard"
	href="#"
	description="La plus petite province du Canada, célèbre pour ses plages de sable rouge et Anne... la maison aux pignons verts."
	></gcds-card>
	<gcds-card
	card-title="Québec"
	href="#"
	description="Une province francophone au riche patrimoine culturel, aux villes historiques et aux vastes forêts."
	></gcds-card>
	<gcds-card
	card-title="Saskatchewan"
	href="#"
	description="Connue pour ses grands ciels, ses champs de blé et sa forte tradition agricole."
	></gcds-card>
	<gcds-card
	card-title="Yukon"
	href="#"
	description="Un territoire nordique sauvage célèbre pour la ruée vers l’or du Klondike et ses paysages grandioses."
	></gcds-card>
</gcds-grid>

<h4>Code source</h4>
<pre><code>&lt;gcds-grid columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" class="wb-filter" data-wb-filter='{ "selector": "gcds-card" }'>
	&lt;gcds-card
	card-title="Alberta"
	href="#"
	description="Réputée pour les montagnes Rocheuses, les vastes prairies et les sables bitumineux."
	>&lt;/gcds-card>
	&lt;gcds-card
	card-title="Colombie-Britannique"
	href="#"
	description="Une province côtière avec des forêts pluviales, des montagnes et des villes dynamiques comme Vancouver."
	>&lt;/gcds-card>
	...
&lt;/gcds-grid></code></pre>
